<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right" :style="style">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">分类</span>
            <el-radio-group v-model="queryInfo.CommentUser">
              <el-radio :label="'1'">合理用药审查</el-radio>
              <el-radio :label="'2'">人工审核不合理</el-radio>
            </el-radio-group>
          </div>
          <div class="fl">
            <span class="c_tip">开嘱时间</span>
            <el-date-picker
              v-model="queryInfo.Startdatetime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy/MM/dd"
              format="yyyy/MM/dd"
            />
            至
            <el-date-picker
              v-model="queryInfo.Enddatetime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy/MM/dd"
              format="yyyy/MM/dd"
            />
          </div>
          <div class="fl">
            <span class="c_tip">特殊标记医嘱</span>
            <el-select v-model="queryInfo.Commentsresult" placeholder="请选择">
              <el-option
                v-for="item in CommentsresultList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <div class="fl">
            <span class="c_tip">科室</span>
            <el-input v-model="queryInfo.DeptName" readonly="readonly" clearable class="c_long" type="text" placeholder="科室" />
            <i class="c_searchbtn" @click="selectPop('科室')">选择</i>
          </div>
          <div class="fl">
            <span class="c_tip">药疗医嘱</span>
            <el-input v-model="queryInfo.Drugname" readonly="readonly" clearable class="c_long" type="text" placeholder="药疗医嘱" />
            <i class="c_searchbtn" @click="selectPop('药疗医嘱')">选择</i>
          </div>
          <div class="fl">
            <span class="c_tip">问题类型</span>
            <el-input v-model="queryInfo.Commentsname" clearable class="c_long" type="text" placeholder="请选择一个问题类型" />
            <i class="c_searchbtn" @click="selectPop('问题类型')">选择</i>
          </div>
        </div>
        <div class="sbtn_box">
          <el-button type="primary" class="btn_clear" @click="btnGetOrdersListJson">查询</el-button>
          <el-button type="danger" class="btn_clear" @click="clearFun">重置</el-button></div>
        <div v-if="!sbtnFlag" class="show_btn" @click="showMore">
          <i class="el-icon-caret-bottom" />
          <span>显示更多</span>
        </div>
        <div v-if="sbtnFlag" class="show_btn" @click="showHide">
          <i class="el-icon-caret-top" />
          <span>收起</span>
        </div>
      </div>
    </div>
    <div class="list_tip clear" />
    <div class="wrapper">
      <Bluetable
        ref="blueTable"
        :t-head="tHeader"
        :t-data="OrdersList"
        @operateClick="operateClickOrdersList"
      />
      <pagination
        :total="queryPage.total"
        :page.sync="queryPage.pagenum"
        :limit.sync="queryPage.pagesize"
        @pagination="paginationChange"
      />
    </div>
    <el-dialog
      title="修改人工点评医嘱"
      :visible.sync="saveOrdersCommentVisible"
      @close="closeDialog"
    >
      <el-form :model="saveOrdersCommentObject">
        <el-form-item label="人工点评医嘱" :label-width="formLabelWidth">
          <el-radio-group v-model="saveOrdersCommentObject.Commentsresult">
            <el-radio :label="'1'">合理</el-radio>
            <el-radio :label="'0'">不合理</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="问题类型" :label-width="formLabelWidth">
          <el-input v-model="saveOrdersCommentObject.Commentsname" clearable class="c_long" type="text" placeholder="请选择一个问题类型" />
          <i class="c_searchbtn" @click="selectPop('问题类型')">选择</i>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="SaveOrdersComment">确 定</el-button>
      </div>
    </el-dialog>
    <Poptable
      ref="ptable"
      :p-type="pType"
      ctype="zy"
      @handleDeptcode="handleDeptcode"
      @handleUniquecode="handleUniquecode"
      @handleCommentList="handleCommentList"
    />
  </div></template>
<script>
import { GetOrdersListJson, SaveOrdersComment } from '@/api/cpw'
import Poptable from '../components/poptable'
export default {
  components: { Poptable },
  mounted() {
    let userInfo = localStorage.getItem("user");
    // this.Username = JSON.parse(userInfo).real_name
    this.Userid = JSON.parse(userInfo).user_no
  },
  activated() {
    let userInfo = localStorage.getItem("user");
    // this.Username = JSON.parse(userInfo).real_name
    this.Userid = JSON.parse(userInfo).user_no
  },
  data() {
    return {
      Userid: '',
      // 查询参数
      queryInfo: {
        CommentUser: '1',
        Startdatetime: '',
        Enddatetime: '',
        Commentsresult: '',
        DeptCode: '',
        DeptName: '',
        Commentsname: '',
        Uniquecode: '',
        Drugname: ''
      },
      CommentsresultList: [{
        value: '0',
        label: '合理用药审查不合理'
      }, {
        value: '1',
        label: '合理用药审查合理'
      }, {
        value: '2',
        label: '合理用药审查所有'
      }],
      // 查询病人列表分页参数
      queryPage: {
        // 第n页
        pagenum: 1,
        // 每页多少条
        pagesize: 10,
        // 总条数
        total: 0
      },
      OrdersList: [],
      saveOrdersCommentVisible: false,
      saveOrdersCommentObject: {
        Commentsresult: '1',
        Commentsname: '',
        Patient_id: '',
        Cid: ''
      },
      formLabelWidth: '120px',
      tHeader: [
        {
          operate: ['修改'],
          label: '操作',
          link: true,
          width: '80px'
        },
        {
          prop: 'comment_result',
          label: '审核',
          width: '75px'
        }, {
          prop: 'is_temp',
          label: '长/临',
          width: '50px'
        }, {
          prop: 'patient_name',
          label: '病人姓名'
        }, {
          prop: 'ordername',
          label: '医嘱内容'
        }, {
          prop: 'drugspec',
          label: '规格',
          width: '100px'
        }, {
          prop: 'routename',
          label: '用法用量'
        }, {
          prop: 'remark',
          label: '补充用法'
        }, {
          prop: 'startdatetime',
          label: '开嘱时间',
          width: '90px'
        }, {
          prop: 'enddatetime',
          label: '停嘱时间',
          width: '90px'
        }
      ],
      pType: '11',
      sbtnFlag: false,
      style: 'height: 60px;padding-top: 10px;'
    }
  },
  methods: {
    // 修改
    operateClickOrdersList(val, row) {
      // console.log(val)
      // console.log(row)
      this.saveOrdersCommentObject.Patient_id = row.patient_id
      this.saveOrdersCommentObject.Cid = row.cid
      this.showDialog()
    },
    showDialog() {
      this.saveOrdersCommentVisible = true
    },
    closeDialog() {
      this.saveOrdersCommentVisible = false
      this.saveOrdersCommentObject = {
        Commentsresult: '1',
        Commentsname: '',
        Patient_id: '',
        Cid: ''
      }
    },
    async SaveOrdersComment() {
      const tempJson = {
        Userid: this.Userid,
        Patient_id: this.saveOrdersCommentObject.Patient_id,
        Cid: this.saveOrdersCommentObject.Cid,
        Commentsresult: this.saveOrdersCommentObject.Commentsresult,
        Type: this.saveOrdersCommentObject.Commentsname
      }
      await SaveOrdersComment({
        json: tempJson
      }).then(res => {
        if (res === '保存成功') {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '保存失败',
            type: 'warning'
          })
        }
        this.closeDialog()
        this.btnGetOrdersListJson()
      }).catch(err => {
        console.log(err)
      })
    },
    // 医嘱分页
    async paginationChange(type) {
      this.queryPage.pagenum = type.page
      this.queryPage.pagesize = type.limit
      await this.GetOrdersListJson()
    },
    btnGetOrdersListJson() {
      this.queryPage = {
        // 第n页
        pagenum: 1,
        // 每页多少条
        pagesize: 10,
        // 总条数
        total: 0
      }
      this.GetOrdersListJson()
    },
    async GetOrdersListJson() {
      const tempJson = JSON.parse(JSON.stringify(this.queryInfo))
      for (var key in tempJson) {
        if (tempJson[key] === '') {
          delete tempJson[key]
        }
      }
      await GetOrdersListJson({
        json: tempJson,
        pagenum: this.queryPage.pagenum,
        pagesize: this.queryPage.pagesize
      }).then(res => {
        this.OrdersList = res.rows
        this.queryPage.total = res.records
      }).catch(err => {
        console.log(err)
      })
    },

    selectPop(val) {
      this.$refs.ptable.show()
      this.pType = val
    },
    handleDeptcode(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].deptname)
        codes.push(data[i].deptcode)
      }
      this.queryInfo.DeptName = names.join(',')
      this.queryInfo.DeptCode = codes.join(',')
    },
    handleUniquecode(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].drugname)
        codes.push(data[i].uniquecode)
      }
      this.queryInfo.Drugname = names.join(',')
      this.queryInfo.Uniquecode = codes.join(',')
    },
    handleCommentList(data) {
      if (this.saveOrdersCommentVisible === true) {
        this.saveOrdersCommentObject.Commentsname = data[0].commentsname
      } else {
        this.queryInfo.Commentsname = data[0].commentsname
      }
    },
    showMore() {
      this.sbtnFlag = true
      this.style = ''
    },
    showHide() {
      this.sbtnFlag = false
      this.style = 'height: 60px;padding-top: 10px;'
    },
    clearFun() {
      this.$refs.ptable.clearSelect()
      this.queryInfo = {
        CommentUser: '1',
        Startdatetime: '',
        Enddatetime: '',
        Commentsresult: '',
        DeptCode: '',
        DeptName: '',
        Commentsname: '',
        Uniquecode: '',
        Drugname: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  body{
    background:#e6edf5;
  }
  .wrapper{
    margin: 0 20px;
  }
  .patientInfo{
    .infoline{
      display: flex;
      justify-content: space-around;
      .fl{
        display: flex;
        padding-bottom: 5px;
        width: 210px;
        .c_tip{
          width: 60px;
          text-align: right;
        }
        .c_text{
          width: 140px;
          padding-left: 4px;
        }
      }
    }
  }
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      line-height:40px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
        line-height:65px;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        padding:15px 0;
        position:relative;
        .show_btn{
          position:absolute;
          right:20px;
          bottom:15px;
          border:1px solid #e1e1e1;
          background:#f9fafc;
          border-radius:2px;
          text-align:center;
          line-height:32px;
          width:104px;
          height:32px;
          font-size:14px;
          color:#9f9f9f;
          cursor: pointer;
        }
        .fl{
          margin-bottom:10px;
        }
        .c_tip{
          display:inline-block;
          width:80px;
          padding-right:10px;
          text-align:right;
        }
        .c_input{
          width:131px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:90px;
        }
        .c_long{
          width:180px;
        }
        .c_searchbtn{
          display:inline-block;
          width:34px;
          height:25px;
          margin-left:3px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:60px;
          height:40px;
          line-height:40px;
        }
        .sbtn_box{
          text-align:left;
          padding-left:82px;
        }
        .c_select{
          width:130px;
        }
        @media screen and (min-width:1466px){
          .c_select{
            width:150px;
          }
          .btn_clear{
            padding:0;
            width:70px;
            height:40px;
            line-height:40px;
          }
          .c_input{
            width:150px;
          }
          .c_search{
            width:100px;
          }
          .c_searchbtn{
            width:42px;
            margin-left:4px;
          }
          .c_tip{
            width:100px;
          }
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }

    .infogroups{
      width: 100%;
      height: 100%;
    }
    /deep/.el-scrollbar__wrap {
      overflow-x: hidden;
    }

    .table_box{
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding:0 18px;
      .infoCard{
        width: 220px;
        padding-bottom: 20px;
      }
    }
  }
  .el-checkbox__label{
    padding-left:5px;
  }
  .el-checkbox{
    margin-right:10px;
  }
  /deep/.el-card__body{
    padding: 0;
  }
  /deep/.el-input{
    width:160px;
    height:40px;
    border-radius:4px;
    padding-left:5px;
    font-size: 12px;
  }
  .el-card{
    border: 0;
  }
  .no-data{
    font-size: 25px;
    margin-left: 115px;
  }
  .infoCard{
    width: 20%;
    min-width: 20%;
    max-width: 20%;
    padding: 10px 10px;
  }
  .card-title{
    color:#ffffff;
    background-color: #28A4F4;
    height: 75px;
    text-align: center;
    .header-bedid{
      font-size: 20px;
      padding: 10px;
    }
    .header-bedid:hover {
      span {
        border-bottom: 1px solid #fff;
      }
    }
    .header-content:hover{
      span{
        border-bottom: 1px solid #fff;
      }
    }
  }
  .card-body {
    font-size: 12px;
    padding: 10px;
    height: 180px;
    .info-item{
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 5px;
      .info-label{
        flex: 1;
        text-align: right;
      }
      .info-message{
        flex: 1;
        margin-left: 5px;
        .info-status{
          color: #ffffff;
          span{
            padding: 1px 3px;
            border-radius: 3px;
            background-color: #5cb85c;
          }
        }
      }
      .info-more{
        display: flex;
        .info-sex{
          padding-left: 5px;
        }
      }
    }
  }
  /deep/.el-radio__label{
    font-size: 12px;
  }
  .c_searchbtn{
    display:inline-block;
    width:34px;
    height:25px;
    margin-left:3px;
    background:#28a4f4;
    color:#fff;
    font-size:12px;
    text-align:center;
    line-height:26px;
    border-radius:6px;
    cursor:pointer;
  }
</style>
